<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>用户手册</title>
	<link rel="stylesheet" type="text/css" href="__CDN__/assets/libs/bootstrap/dist/css/bootstrap.min.css"/>
	<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"/>
	<link rel="stylesheet" type="text/css" href="__CDN__/assets/libs/bootstrap/dist/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="__CDN__/assets/css/usinghelp.css"/>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">   
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle = "collapse"  data-target="#navbar">
                   
                </button>
                <a class="navbar-brand">
                	<img class="hidden-xs logo1" src="__CDN__/assets/img/helper/logo_1.png"/>
                	<img class="visible-xs" src="__CDN__/assets/img/helper/logo_1.png"/>
                </a>
            </div>
            <div id="navbar"  class="collapse navbar-collapse">
                <ul class="nav navbar-nav"> 
                    <li><a href="index.html">{:__('Home')}</a></li>
                    <li><a href="index.html#main">{:__('Function')}</a></li>
                    <li><a href="index.html#inst">{:__('Enter')}</a></li>
                    <li><a href="#">{:__('Helper')}</a></li>
                </ul>
            </div>
            <div class="hidden-xs downLoad downloadBc"><a href="index.html">Download APP</a></div>
            <div class="cutLan">
				<span><?php if($config['language']=='zh-cn'){echo "中文";}elseif($config['language']=='en'){echo "EN";} ?></span>
            	<img class="selectLan hidden-xs" src="__CDN__/assets/img/helper/arrow_2.png" alt="" />
            	<img class="selectLan visible-xs" src="__CDN__/assets/img/helper/mobile/VectorSmartObject@2x.png" alt="" />
            </div>
        </div>
    </nav>
    <div class="lan">
		<div><a href="?ref=index&lang=en">EN</a></div>
		<div><a href="?ref=index&lang=zh-cn">中文</a></div>
    </div>
    <div class="main">
    	<div class="container-fluid main_title">
    		<div class="row">
    			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 title">
	    			<h2>使用帮助</h2>
	    		</div>
	    		<!--<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 search">
	    			<input type="text" value="" placeholder="请输入搜索内容"/>
	    			<img src="__CDN__/assets/img/helper/help_seek_icon.png"/>
	    		</div>-->
    		</div>
    	</div>
    	<div class="container-fluid main_body">
    		<div class="select visible-xs">
    			<span class="selectText">软件安装</span>
    			<img src="__CDN__/assets/img/helper/move_memu_icon.png"/>
    		</div>
			<div class="row">
				<div class="col-lg-3 listBox">
					<ul>
						<?php
						    foreach($type_name as $key=>$value){
								$key = $key+1;
								if($value['smallimage']=='/assets/img/helper/help_menu_icon.png'){
						            echo "<li data-center_id='".$value['id']."' class='no-method'  data-num = \"".$key.'"'."><span>".$value['name']."</span><img class=\"listImg".$key.'"' ." src=".'"'.$value['smallimage'].'"'."/></li>";
								}
								if($value['smallimage']=='/assets/img/helper/help_menu_icon1_down.png'){
								echo "<li class='method' data-num = \"".$key.'"'."><span>".$value['name']."</span><img class=\"listImg".$key.'"' ." src=".'"'.$value['smallimage'].'"'."/></li>";
						}
						    }
                        ?>
					</ul>
					<ol class="ol">
						<?php
						    foreach($type_children as $key=>$value){
								echo "<li data-center_id='".$value['id']."' class='no-method'>".$value['name']."</li>";
							}
						?>
					</ol>
				</div>
				<div class="col-lg-9 listMsg">
					<!--动态添加显示内容-->
				</div>
			</div>
    	</div>
    </div>
	<footer>
		<div class="footer">
			<!--<div class="container-fluid">-->
				<!--<div class="row">-->
					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 address">2018© bibowallet.com</div>
					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 link">
						<a href=""><img src="__CDN__/assets/img/helper/icon-footer-01-twitter.png" alt="" /></a>
						<a href=""><img class="fff" src="__CDN__/assets/img/helper/icon-footer-02-facebook.png" alt="" /></a>
						<a href=""><img src="__CDN__/assets/img/helper/icon-footer-03-telegram.png" alt="" /></a>
						<a href=""><img src="__CDN__/assets/img/helper/icon-footer-04-medium.png" alt="" /></a>
						<a href=""><img src="__CDN__/assets/img/helper/icon-footer-05-github.png" alt="" /></a>
						<a href=""><img src="__CDN__/assets/img/helper/icon-footer-06-microblog.png" alt="" /></a>
					</div>
				<!--</div>-->
			<!--</div>-->
		</div>
	</footer>
</body>
</html>
<script type="text/javascript">
	//适配移动端
	function resize() {
		var deviceWidth = document.documentElement.clientWidth;
		if (deviceWidth < 240) deviceWidth = 240;
			document.documentElement.style.cssText = 'font-size:' + (deviceWidth / 15) + 'px!important';
	}
	window.addEventListener('resize', resize);
resize();

var isBegin = false;
$('.navbar-header button').click(function(){
	if(isBegin == false){
		$('.navbar-header button').css({
			width:"0.76rem",
			height:"0.76rem",
			top:"0.74rem",
			backgroundImage:'url(__CDN__/assets/img/helper/mobile/xz4.png)',
			backgroundSize:"90%90%",
			backgroundPosition:"center",
			backgroundColor: '#ffffff',
		});
		$('#navbar').slideDown(250)
	}else{
		$('.navbar-header button').css({
			width:"0.76rem",
			height:"0.58rem",
			top:"0.83rem",
			backgroundImage:'url(__CDN__/assets/img/helper/mobile/icon_nav.png)',
			backgroundSize:"90%90%",
			backgroundPosition:"center",
			backgroundColor: '#ffffff',
		});
		$('#navbar').slideUp(250)
	}
	isBegin = !isBegin
});

$('.cutLan').click(function(){
	//取消事件冒泡 
    event.stopPropagation(); 
	$('.lan').slideToggle(250);
});
//点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
$(document).click(function(event){
    var _con = $('.lan');  // 设置目标区域
    if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
        //$('#divTop').slideUp('slow');  //滑动消失
        $('.lan').slideUp(250);   //淡出消失
    }
});

var isBegin2 = false;
$('.method').click(function(){
	$('.ol').slideToggle(250);
	if(isBegin2 == false){
		$('footer').css({
			"position":"static"
		})
	}else{
		$('footer').css({
			"position":"fixed",
			"bottom": "0"
		})
	}
	isBegin2 = !isBegin2
	
	
});

var isBegin3 = false;
$('ul>li').each(function(index,elem){
	$(this).click(function(e){
		var num = e.target.dataset.num;
		$(this).siblings().removeClass('active');
//		$(this).siblings().children('img').attr('src','__CDN__/assets/img/helper/help_menu_icon.png')
		$(this).addClass('active');
//		$(this).children('img').attr('src','__CDN__/assets/img/helper/help_menu_icon_checked.png')
		$('ol>li').removeClass('active');
		var text = $(this).text();
		$('.selectText').html(text);
		if(num == 1){
			$('.listImg1').attr('src','__CDN__/assets/img/helper/help_menu_icon_checked.png');
			$('.listImg2').attr('src','__CDN__/assets/img/helper/help_menu_icon.png');
			$('.listImg3').attr('src','__CDN__/assets/img/helper/help_menu_icon1_down.png')
		}else if(num == 2){
			$('.listImg1').attr('src','__CDN__/assets/img/helper/help_menu_icon.png');
			$('.listImg2').attr('src','__CDN__/assets/img/helper/help_menu_icon_checked.png');
			$('.listImg3').attr('src','__CDN__/assets/img/helper/help_menu_icon1_down.png')
		}else if(num == 3){
			$('.listImg1').attr('src','__CDN__/assets/img/helper/help_menu_icon.png');
			$('.listImg2').attr('src','__CDN__/assets/img/helper/help_menu_icon.png');
//			$('.listImg3').attr('src','__CDN__/assets/img/helper/help_menu_icon1_up.png')
			if(isBegin3 == false){
				$('.listImg3').attr('src','__CDN__/assets/img/helper/help_menu_icon1_up.png')
			}else{
				$('.listImg3').attr('src','__CDN__/assets/img/helper/help_menu_icon2_down.png')
			}
			isBegin3 = !isBegin3
		}
	})
});

var isBegin5 = false;
$('.navbar-nav').each(function(index,elem){
	$(this).click(function(e){
		$('#navbar').slideUp(250);
		if(isBegin5 == false){
			$('.navbar-header button').css({
				width:"0.76rem",
				height:"0.58rem",
				top:"0.83rem",
				backgroundImage:'url(__CDN__/assets/img/helper/mobile/icon_nav.png)',
				backgroundColor: '#ffffff',
			})
			
		}else{
			$('.navbar-header button').css({
				width:"0.76rem",
				height:"0.76rem",
				top:"0.74rem",
				backgroundImage:'url(__CDN__/assets/img/helper/mobile/xz4.png)',
				backgroundColor: '#ffffff',
			})
		}
		isBegin = false;
	})
});

$('ol>li').each(function(index,elem){
	$(this).click(function(){
		$(this).siblings().removeClass('active');
		$(this).addClass('active');
		$('ul>li').removeClass('active');
		var text = $(this).text();
		$('.selectText').html(text);
		$('.listImg3').attr('src','__CDN__/assets/img/helper/help_menu_icon2_up.png')
	})
});
var isBegin4 = false;
$('.select').click(function(){
	if(isBegin4 == false){
		$('ul').slideDown(250)
	}else{
		$('ul').slideUp(250);
		$('ol').slideUp(250)
	}
	isBegin4 = !isBegin4
});
$('.no-method').click(function(e){
   var helper_center_id = $(this).data("center_id");
    $.ajax(
        {
            url: "/index/helper/getMaincontent",
            type: "post",
            data:{helper_center_id,helper_center_id},
            success: function (data) {
                var msg = data[0].maincontent;
                var divshow = $(".listMsg");
                divshow.empty();
                divshow.append(msg);
            }
        }
    );
});

</script>